<!doctype html>
<html>

<head>
    <link href="css/base.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="js/baiduTemplate.js"></script>
</head>

<body>
    <article class="blogs">
        <h2 class="title_tj">
            <p>文章<span>推荐</span></p>
        </h2>
        <div class="newblog left">
            <div id="result"></div>

            <!--分页开始-->
            <div class="page">

            </div>
            <!--分页结束-->
        </div>
    </article>

    <footer>
        <p class="ft-copyright">个人博客 Sunshine </p>
        <div id="tbox"> <a id="togbook" href=""></a> <a id="gotop" href="javascript:void(0)"></a></div>
    </footer>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script>
    $.get("http://192.168.174.166:8081/getChapterList", function (data) {
        var data = {
            "title": '欢迎使用baiduTemplate',
            "list": JSON.parse(data)
        };
        // console.log(data.list)
        for (let i = 0; i < data.list.length; i++) {
            let divNode = document.createElement("div");
            divNode.className = "oneblog";
            divNode.innerHTML = `<h2><a title="路·过-喜欢在路上" href="/">${data.list[i].chapterName}</a></h2>
                    <figure><img src='${data.list[i].imagePath}' border='0' width='120' height='120' alt='路·过-喜欢在路上'></figure>
                    <ul class="nlist">
                        <p>${data.list[i].chapterDes}...</p>
                        <a title="路·过-喜欢在路上" href="##" target="_blank" class="readmore" onclick="showDetail(event, ${data.list[i].chapterId})">阅读全文>></a>
                    </ul>
                    <p class="dateview">
                        <span>发布时间：${data.list[i].publishTimer}</span>
                        <span>作者：${data.list[i].author}</span>
                        <span>分类：[<a href="/">悠客</a>]</span>
                        <span class="nl">浏览（${data.list[i].views})</span>
                        <span class="n2">评论（<a href="/">0</a>)</span>
                        <div class="line"></div>
                    </p>`
            document.getElementById("result").appendChild(divNode);
        }
    })

    function showDetail(e, chapterId) {
        e.preventDefault();
        fetch("http://192.168.174.166:8081/detail")
            .then(res => res.json())
            .then(res => {
                console.log(res);
            })
        // window.location = "http://localhost:8081/detail?chapterId=" + chapterId;
    }
</script>

</html>